<script setup>
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { onMounted } from 'vue';


const props = defineProps({
    item: {
        type: Object,
    }
})
echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);


var option
option = {
  tooltip: {
    trigger: 'item'
  },
//   legend: {
//     top: '5%',
//     left: 'center'
//   },
  color: ['#91cc75','#ee6666',  '#5470c6',   '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
  series: [
    {
      name: props.item.seriesName,
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        // position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 22,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: true
      },
      data: props.item.data
    }
  ]
};
onMounted(() => {
    var chartDom = document.getElementById(props.item.id);
    var myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
})

</script>

<template>
  <el-card class="el-card">
    <template #header>
        <div class="auto-space-between">
            <div>
                <span>
                    {{ props.item.header }}
                    <router-link :to="{path: props.item.id.toLowerCase()+'/list'}">
                    {{ props.item.total }}
                    </router-link>
                </span>
            </div>
            <div></div>
        </div>
    </template>
    <div>
        <div class="charts" :id="props.item.id"></div>
    </div>
  </el-card>

</template>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.charts {
  position: relative;
  height: 100vh;
  overflow: hidden;
  height: 320px;
  width: 400px;
}
.el-card {
    height: 400px;
    width: 480px;
}
</style>
